<template>
  <div class="one-word-contain">
    <div class="one-word-contain-left mr30">
      <div class="contain-word">
        <el-image
          style="width: 240px; height: 240px"
          :src="wordData.img"
          fit="contain"
        >
        </el-image>
      </div>
    </div>
    <div class="one-word-contain-right">
      <h3 class="word-title">
        <span>{{ wordData.content }}</span>
        <div class="contain-audio ml30">
          <AudioPlay
            :type="1"
            :audioSrc="baseURL + wordData.audio"
            :ref="'audioPlay'"
            :disabled="hasRecording"
          ></AudioPlay>
        </div>
      </h3>
      <p class="word-paraphrase mt20">
        <span v-html="wordData.parse"></span>
      </p>
      <div class="word-record mt15">
        <div class="mr20">
          <AudioRecord
            :type="2"
            @start="handleStart"
            @ended="handleEnd"
            @clickEnd="audioRecordEnd()"
            @beforeSatrt="beforeRecordSatrt"
            :ref="`audioRecord-${wordData.id}`"
            :maxTime="10000"
          ></AudioRecord>
        </div>
        <div
          class="word-record-score"
          v-if="wordData.score || wordData.score === 0"
        >
          <span> 得分：{{ wordData.score }} </span>
          <div v-if="wordData.result" class="word-record-score-detail">
            <!-- <div
              class="score-detail-item"
              v-if="wordData.result.phoneme.letters"
            >
              <label class="score-detail-item-label">标准字母序列:</label>
              <span class="score-detail-item-content">{{
                wordData.result.phoneme.letters
              }}</span>
            </div> -->
            <!-- <div class="score-detail-item">
              <label class="score-detail-item-label"> 标准发音音标: </label>
              <span class="score-detail-item-content">
                [<el-tooltip
                  v-for="(item, index) in wordData.result.phone.filter(
                    (item) => item.lab && item.lab != '#'
                  )"
                  :key="index"
                  class="item"
                  effect="dark"
                  :content="errType[item.is_err]"
                  placement="bottom"
                  :disabled="item.is_err == 0"
                >
                  <span
                    class="phonetic-text"
                    :class="
                      item.is_err != 0 ? 'red-color-text' : 'green-color-text'
                    "
                    >{{ $phoneme2phonetic(item.lab) }}</span
                  > </el-tooltip
                >]
              </span>
            </div> -->

            <!-- <div
              class="item-content item-syllable score-detail-item"
              v-if="Array.isArray(wordData.result.stress)"
            >
              <label class="score-detail-item-label">重读音节:</label>
              <span class="score-detail-item-content">
                <span
                  class="mr10"
                  v-for="(item, index) in wordData.result.stress.filter(
                    (item) => item.ref == 1
                  )"
                  :key="index"
                >
                  <span
                    v-for="(item2, index2) in item.char.split('_')"
                    :key="index2"
                    class="phonetic-text-small"
                    :class="
                      item.score != 1 ? 'red-color-text' : 'green-color-text'
                    "
                    >{{ $phoneme2phonetic(item2) }}</span
                  >
                </span>
              </span>
            </div> -->
            <div class="score-detail-item score-detail-item-my">
              <span class="score-detail-item-label">
                <span>我的读音:</span>
                <AudioPlay
                  class="ml5"
                  :type="2"
                  :audioSrc="
                    wordData.isAnswer
                      ? wordData.fileData
                      : assetsURL + wordData.url
                  "
                  :disabled="hasRecording"
                ></AudioPlay>
              </span>
              <!-- <span class="score-detail-item-content">
                [<el-tooltip
                  v-for="(item, index) in wordData.result.phone.filter(
                    (item) => item.rec && item.rec != '#'
                  )"
                  :key="index"
                  class="item"
                  effect="dark"
                  :content="errType[item.is_err]"
                  placement="bottom"
                  :disabled="item.is_err == 0"
                >
                  <span
                    class="phonetic-text"
                    :class="
                      item.is_err != 0 ? 'red-color-text' : 'green-color-text'
                    "
                    >{{ $phoneme2phonetic(item.rec) }}</span
                  > </el-tooltip
                >]
              </span> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay.vue";
import AudioRecord from "@/components/AudioRecord.vue";
import { postSpellVoice } from "@/api/naturalSpell";
export default {
  data() {
    return {
      hasRecording: false,
      //音素发音错误类型
      errType: {
        0: "发音结果正确",
        1: "多读",
        2: "漏读",
        3: "错读",
        4: "没有浊化",
      },
    };
  },
  props: {
    wordData: {
      type: Object,
    },
    spellId: {
      type: Number,
    },
  },
  methods: {
    handleStart() {
      console.log("开始");
      this.hasRecording = true;
    },
    handleEnd() {
      console.log("结束");
      this.hasRecording = false;
    },
    // 点击录音开始前的回调
    beforeRecordSatrt() {
      this.$pauseAllAudio();
    },
    pauseRecord() {
      if (this.hasRecording && this.$refs[`audioRecord-${this.wordData.id}`]) {
        this.$refs[`audioRecord-${this.wordData.id}`].clickStop();
      }
    },
    // 点击结束录音的回调
    // sentence_id=181&content=I'm Mike.
    // http://localhost:8101/sound/save?word_id=121&word_name=testcc&is_child=1&accent=1
    audioRecordEnd() {
      let blob = this.$refs[`audioRecord-${this.wordData.id}`].getMp3Data();
      let file = new window.File([blob], this.wordData.id + ".mp3", {
        type: blob.type,
      });
      let formData = new FormData();
      formData.append("sound_file", file);
      formData.append("element_id", this.spellId);
      formData.append("word_name", this.wordData.content);
      formData.append("spell_id", this.wordData.id);
      formData.append("accent", this.$store.getters.isBritish ? 1 : 2);
      formData.append("is_child", 1);
      formData.append("source", 1);
      this.postSpellVoice(formData, blob);
    },
    postSpellVoice(data, blob) {
      postSpellVoice(data).then((res) => {
        if (res.code == 200) {
          this.$emit("recordedData", res.data, blob);
        }
      });
    },
  },
  components: {
    AudioPlay,
    AudioRecord,
  },
};
</script>